<template>
  <!-- 添加药品界面 -->
  <div id="app">
    <!-- 设置顶部导航栏 -->
    <mt-header title="添加药品">
      <mt-button icon="back" @click="goBack" slot="left">返回</mt-button>
      <mt-button slot="right" @click="goHome">
        <img
          src="../../assets/images/home.png"
          height="20"
          width="20"
          slot="icon"
          style="margin-top: 5px"
        />
      </mt-button>
    </mt-header>

    <div class="main">
      <!-- 表单区域 -->
      <van-form>
        <van-field
          clearable
          readonly
          name="name"
          label="药品名称"
          :value="value1"
          placeholder="请选择药品名称"
          @click="showPicker1 = true"
          :rules="[{ required: true, message: '请选择药品名称' }]"
        />
        <van-field
          clearable
          v-model="sellingPrice"
          name="price"
          label="价格"
          placeholder="价格"
          :rules="[{ required: true, message: '请填写添加价格' }]"
        />
        <van-field
          clearable
          readonly
          name="drugType"
          label="药品类型"
          :value="value2"
          placeholder="药品类型"
          @click="showPicker2 = true"
          :rules="[{ required: true, message: '请填写药品类型' }]"
        />

        <!-- 药品名称选择器 -->
        <van-popup v-model="showPicker1" position="bottom">
          <van-picker
            show-toolbar
            :columns="columns"
            value-key="name"
            @confirm="onConfirm"
            @cancel="showPicker1 = false"
          />
        </van-popup>
        <!-- 药品类型选择器 -->
        <van-popup v-model="showPicker2" position="bottom">
          <van-picker
            show-toolbar
            :columns="columns2"
            value-key="name"
            @confirm="onConfirm2"
            @cancel="showPicker2 = false"
          />
        </van-popup>
        
      </van-form>

      <!-- 按钮 -->
      <div class="btn">
        <van-button
          type="primary"
          size="large"
          round
          block
          color="linear-gradient(to right, #00b894, #55efc4)"
          @click="btnClick"
          >添加药品</van-button
        >
      </div>
      
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  name: "AddDrug",

  data() {
    return {
      showPicker1: false,
      value1: "",
      drugNameId: "",
      drugNameId2: "",
      sellingPrice: "",
      showPicker2: false,

      value2: "",
      drugName: "", //药品名称
      columns: [],
      columns2: [],
    };
  },

  mounted() {},

  created() {
    this.getDrugNameList();
    this.getDrugTypeList();
  },

  methods: {
    goBack() {
      this.$router.push({
        path: "./DrugManage",
      });
    },
    goHome() {
      this.$router.push({
        path: "./index",
      });
    },
    //添加按钮点击
    btnClick() {
      /* console.log(this.value1 + this.drugNameId);
      console.log(this.sellingPrice);
      console.log(this.value2 + this.drugNameId2); */
      if (
        this.value1 == "" ||
        this.sellingPrice == "" ||
        this.drugNameId2 == ""
      ) {
        Toast("请完整填写表单");
      } else {
        this.$http
          .post("drug", {
            name: this.value1,
            dictionaryId: this.drugNameId,
            sellingPrice: this.sellingPrice,
            typeId: this.drugNameId2,
          })
          .then((res) => {
            console.log(res);
            if (res.data.code == 500) {
              let msg = res.data.message;
              Toast(msg);
            } else {
              Toast("添加成功");
              setTimeout(() => {
                this.$router.push({
                  path: "./DrugManage",
                });
              }, 800);
            }
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
    //药品名称选择器展开
    onConfirm(value) {
      this.value1 = value.name;
      //   console.log(value.name + value.id);
      this.drugNameId = value.id;
      this.showPicker1 = false;
    },
    //药品类型选择器展开
    onConfirm2(value) {
      this.value2 = value.name;
      this.drugNameId2 = value.id;
      this.showPicker2 = false;
    },
    //获取药品名称字典
    getDrugNameList() {
      this.$http
        .get("drug-dictionary", {})
        .then((res) => {
          //console.log(res);
          this.columns = res.data.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //获取药品类型字典
    getDrugTypeList() {
      this.$http
        .get("drug-type", {})
        .then((res) => {
          //console.log(res);
          this.columns2 = res.data.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style lang="less" scoped>
.btn {
  margin-top: 15px;
}
</style>